<template>
  <div class="add-var">
    <div class="props">
      <SProp align="right" v-model:data="name" label="名称"></SProp>
      <SProp align="right" label="类型" v-if="!target">
        <SSelect :data="types" v-model:value="type"></SSelect>
      </SProp>
      <SProp align="right" v-model:data="value" label="初始值"></SProp>
      <SProp align="right" v-model:data="desc" label="描述"></SProp>
    </div>
    <div class="buttons">
      <SButton @click="onOk">确定</SButton>
      <SButton @click="onCancel">取消</SButton>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, ref } from 'vue';
import SProp from '@/ui-kit/prop/prop.vue';
import SButton from '@/ui-kit/button/button.vue';
import { ProvideKey } from '@/ui-kit/window';
import { generate } from 'shortid';
import SSelect from '@/ui-kit/select/select.vue';
import assetsStore from '../../../store/assets';
import { AssetType, IAssetObject } from '../../../store/types';

const enum VarType {
  String = 'string',
  Boolean = 'boolean',
  Number = 'number',
}

export default defineComponent({
  name: 'add-var',
  components: { SSelect, SButton, SProp },
  emits: [],
  props: {
    data: {
      type: String,
    },
  },
  setup(props, { emit }) {
    const closeDialog = inject(ProvideKey.CloseWindow, () => {});
    const callback = inject(ProvideKey.ResponseCB, (data: any) => {});
    let target: null | sail.Variable = null;
    if (props.data) {
      // fixme 还有优化的空间
      const ret: IAssetObject[] = assetsStore().filterAssetByType(AssetType.Object);
      for (let i = 0; i < ret.length; i++) {
        const item = ret[i];
        target = item.data.vars.find(el => el.id === props.data) || null;
        if (target) {
          break;
        }
      }
    }

    const name = ref(target ? target.name : '变量1');
    const type = ref(target ? target.type : sail.VarType.Number);
    const value = ref(target ? target.value : '0');
    const desc = ref(target ? target.desc : '变量');
    const types = ref([
      {
        label: '布尔',
        value: sail.VarType.Boolean,
      },
      {
        label: '数字',
        value: sail.VarType.Number,
      },
      {
        label: '字符串',
        value: sail.VarType.String,
      },
    ]);
    return {
      target, types, name, type, desc, value,
      onOk() {
        const varData: sail.Variable = {
          id: generate(),
          type: type.value,
          desc: desc.value,
          value: value.value,
          name: name.value,
        };
        switch (varData.type) {
          case sail.VarType.Number: {
            try {
              varData.value = parseFloat(varData.value.toString());
            } catch (e) {
              console.error(e);
            }
            break;
          }
          case sail.VarType.Boolean: {
            varData.value = !!varData.value;
            break;
          }
          case sail.VarType.String: {
            varData.value = value.value.toString();
            break;
          }
        }


        if (varData.type && varData.desc && varData.name) {
          closeDialog();
          callback(varData);
        } else {
          console.log('请填写完整');
        }
      },
      onCancel() {
        closeDialog();
      },
    };
  },
});
</script>
<style scoped lang="scss">
.add-var {
  display: flex;
  flex-direction: column;

  .props {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    > .ui-prop {
      width: 100%;
    }
  }

  .buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>
